import Crud from '@/components/Crud';
import ChargeDeviceSelect from '@/components/CustomForm/ChargeDeviceSelect';
import ChargeStationSelect from '@/components/CustomForm/ChargeStationSelect';
import { CHARGE_GUN_STATE_MAP } from '@/constants/enums';
import request from '@/utils/request';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Input, Modal, Space, message } from 'antd';
import { useRef, useState } from 'react';
import BatchAdd from './BatchAdd';
import Save from './Save';

const getList = async (params) => {
  const res = await request({
    url: '/datas/charge/gun/list',
    method: 'GET',
    custom: true,
    params: params,
  });
  return {
    total: res?.total,
    data: res?.data,
  };
};

const Index = () => {
  const [mode, setMode] = useState('list');
  const [record, setRecord] = useState();
  const [selectedKeys, setSelectedKeys] = useState([]);
  const crudRef = useRef();

  const deleteRow = (id) => {
    const ids = id ? [id] : selectedKeys;
    Modal.confirm({
      title: `确认删除所选数据?`,
      onOk: async () => {
        await request({
          url: '/datas/charge/gun/delete',
          method: 'POST',
          data: { ids },
        });
        message.success('操作成功');
        crudRef.current?.reload();
        setSelectedKeys([]);
      },
    });
  };

  const columns = [
    {
      title: '序号',
      fixed: 'left',
      width: 65,
      render: (text, record, index) => index + 1,
    },
    {
      title: '充电站',
      dataIndex: 'chargeStationName',
      fixed: 'left',
      width: 150,
    },
    {
      title: '充电设备',
      dataIndex: 'chargeDeviceName',
      fixed: 'left',
      width: 150,
    },
    {
      title: '充电枪编号',
      dataIndex: 'chargeGunCode',
      fixed: 'left',
      width: 150,
    },
    {
      title: '充电枪名称',
      dataIndex: 'chargeGunName',
      fixed: 'left',
      width: 150,
    },
    {
      title: '状态',
      dataIndex: 'state',
      width: 100,
      render: (text) => CHARGE_GUN_STATE_MAP[text] || '',
    },
    {
      title: '系统时间',
      dataIndex: 'time',
      width: 180,
    },
    {
      title: '操作',
      fixed: 'right',
      dataIndex: 'operate',
      fixed: 'right',
      width: 110,
      render: (text, record) => {
        return (
          <Space>
            <a
              onClick={() => {
                deleteRow(record.chargeGunId);
              }}
            >
              删除
            </a>
            <a
              onClick={() => {
                setRecord(record);
                setMode('edit');
              }}
            >
              编辑
            </a>
          </Space>
        );
      },
    },
  ];

  const fields = [
    {
      label: '充电站',
      name: 'chargeStationId',
      children: <ChargeStationSelect />,
    },
    {
      label: '充电设备',
      name: 'chargeDeviceId',
      children: <ChargeDeviceSelect />,
    },
    {
      label: '充电枪编号',
      name: 'chargeGunCode',
      children: <Input placeholder="请输入充电枪编号" />,
    },
  ];

  return (
    <>
      <Crud
        ref={crudRef}
        rowKey="chargeGunId"
        queryFormProps={{ labelCol: 7 }}
        fields={fields}
        columns={columns}
        request={getList}
        toolbar={
          <>
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => setMode('batchAdd')}
            >
              批量添加
            </Button>
            <Button
              icon={<DeleteOutlined />}
              disabled={selectedKeys.length === 0}
              onClick={() => deleteRow()}
            >
              批量删除
            </Button>
          </>
        }
        tableProps={{
          rowSelection: {
            selectedRowKeys: selectedKeys,
            onChange: (selectedRowKeys) => {
              setSelectedKeys(selectedRowKeys);
            },
          },
        }}
      />
      <Save
        open={mode === 'create' || mode === 'edit'}
        record={record}
        onCancel={() => {
          setRecord();
          setMode('list');
        }}
        onOk={() => {
          setRecord();
          setMode('list');
          crudRef.current?.reload();
        }}
      />
      <BatchAdd
        open={mode === 'batchAdd'}
        onCancel={() => {
          setMode('list');
        }}
        onOk={() => {
          setMode('list');
          crudRef.current?.reload();
        }}
      />
    </>
  );
};

export default Index;
